﻿@mixin make-sizes( $breakpoints: $grid-breakpoints) {
    @each $breakpoint in map-keys($breakpoints) {
        $infix: breakpoint-infix($breakpoint, $breakpoints);

        @include media-breakpoint-up($breakpoint, $breakpoints) {
            @each $prop, $abbrev in (width: fui-Width, height: fui-Height) {
                @each $size, $length in $sizes {
                    .#{$abbrev}#{$infix}-#{$size} {
                        #{$prop}: $length !important;
                    }
                }
            }

            .fui-MaxWidth#{$infix}-100 {
                max-width: 100% !important;
            }

            .fui-MaxHeight#{$infix}-100 {
                max-height: 100% !important;
            }

            .fui-MinViewportWidth#{$infix}-100 {
                min-width: 100vw !important;
            }

            .fui-MinViewportHeight#{$infix}-100 {
                min-height: 100vh !important;
            }

            .fui-ViewportWidth#{$infix}-100 {
                width: 100vw !important;
            }

            .fui-ViewportHeight#{$infix}-100 {
                height: 100vh !important;
            }
        }
    }
}

@include make-sizes();
